<template>
  <div>
    <ul class="wanjia">
      <li @click="dialogVisible = true">会员编号：<span>{{mydata.phone}}</span></li>
      <li @click="dialogVisible = true">会员姓名：<span>{{mydata.name}}</span></li>
      <li @click="dialogVisible = true">可用积分：<span class="num">{{mydata.integral}}</span></li>
    </ul>
    <el-row :gutter="20">

      <el-col :span="20">
        <el-table ref="filterTable" :data="tableData1" border style="width: 100%">

          <el-table-column prop="commodityName" label="名称">
          </el-table-column>
          <el-table-column prop="integral" label="所需积分">
          </el-table-column>
          <el-table-column label="数量" width="180" align="center">
            <template slot-scope="scope">
              <el-input-number size="small" v-model="scope.row.num" :min="0" :step="1"  @change="aultJf(scope.row)" ></el-input-number>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row type="flex" justify="space-between" class="btn">
      <el-col class="left">
        使用积分 <span class="money">{{needjf}}</span>积分
        <!--<span class="marg30">使用卡金</span> <span class="money">214</span> <span class="yuan">元</span>-->
      </el-col>
      <el-col class="right">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认结账</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {lishavJftPage} from "@/api/mahjong/commodity";
  import {saveIntegralCover} from "@/api/mahjong/record";
  export default {
    name: "",
    components: {},
    props: {
      details: {}
    },
    data() {
      return {
        needjf:0,
        tableData: [],
        mydata: '',
        sumbitList:[],
        num2: 0,
        tableData1: [{
          name: '利群',
          price: '14.0'
        }, {
          name: '利群',
          price: '14.0'
        }, {
          name: '利群',
          price: '14.0'
        }, {
          name: '利群',
          price: '14.0'
        }],
        dialogVisible: false
      }
    },
    created() {
      this.mydata = this.details;

      this.init();

    },
    methods: {
      aultJf(e,newValue,oldValue){
        let param={};
        param.product=e.commodityName
        param.integral=e.integral;
        param.exchangeNumber=e.num;
        this.sumbitList.push(param);
        this.needjf=parseInt(this.needjf)+parseInt((e.num*e.integral));
        console.log(this.needjf)
      },

      init() {
        lishavJftPage({}).then(response => {
          this.tableData1 = response.data;
          this.tableData1.forEach((item, index) => {
            item.num = 0;
          });
          this.visibleDialog = true
        });


      },
      cancel() {
        this.$emit('update:close', false)
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      open() {
        this.$confirm('暂无标签', '商品标签', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      },
      confirm() {
        let param={};
        param.dtoList=this.sumbitList;
        param.userId=this.mydata.id;
        saveIntegralCover(param).then(response => {
          this.$emit('goLoadMember')
          this.$emit('update:close', false)

        });

      }
    }
  };
</script>
<style>
  .el-table-filter .el-checkbox:nth-of-type(2) .el-checkbox__label {

    background: url("../../../assets/image/yinliao.png") no-repeat 20px 3px;
    padding-left: 40px;
  }

  .el-table-filter .el-checkbox:nth-of-type(3) .el-checkbox__label {

    background: url("../../../assets/image/food.png") no-repeat 20px 3px;
    padding-left: 40px;
  }

  .el-table-filter .el-checkbox:nth-of-type(4) .el-checkbox__label {

    background: url("../../../assets/image/tea.png") no-repeat 20px 3px;
    padding-left: 40px;
  }

  .el-table-filter .el-checkbox:nth-of-type(5) .el-checkbox__label {

    background: url("../../../assets/image/xiaochi.png") no-repeat 20px 3px;
    padding-left: 40px;
  }

  .el-table-filter .el-checkbox:nth-of-type(1) .el-checkbox__label {

    background: url("../../../assets/image/yan.png") no-repeat 20px 3px;
    padding-left: 40px;
  }

  .el-table-filter__bottom button {
    padding: 0 10px;
  }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
  .null {
    text-align: center;
    color: #9C9186;
    font-size: 18px;
  }

  .wanjia {
    margin-bottom: 15px;

    li {
      display: inline-block;
      font-size: 18px;
      color: #201D1B;
      margin-right: 30px;

      span {
        color: #CAAB62;
      }

      .num {
        color: #EB2B2B;
      }

      .yuan {
        color: #9C9186;
      }
    }
  }

  .add {
    background-color: #EBEEF5;
    color: #9C9186;

    &:visited,
    &:hover,
    &:active {
      background-color: #1085FF;
      color: #fff;
    }
  }

  .biaoqian {
    background-color: #CAAB62;
    color: #fff;
  }

  .flex {
    display: flex;
    align-items: center;

    i {
      color: #CAAB62;
      font-size: 20px;
    }

    input {
      font-size: 14px;
      color: #201D1B;
      border: none;
      width: 50px;
      margin-left: 5px;
    }
  }

  .btn {
    margin-top: 20px;

    .left {
      font-size: 18px;
      color: #201D1B;

      span:not(.marg30) {
        color: #EB2B2B;
        font-size: 24px;
      }

      .marg30 {
        margin-left: 30px;
      }

      .yuan {
        color: #9C9186;
        font-size: 18px;
      }
    }

    .right {
      text-align: right;
    }
  }
</style>

